import React, { useState, useEffect } from "react"
import axios from "axios"
import { MD5 } from "crypto-js";

import "./register.css"
import { Input, Toast } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { Notify } from "react-vant";

function Register() {
    // 用户名密码注册
    const navigate = useNavigate();
    const [form, setForm] = useState({
        username: "",
        password: "",
        phone: ""
    })
    const [rule, setRule] = useState("")
    const [passwordRule, setPasswordRule] = useState("")

    const userRegister = async () => {

        if (form.username.length < 5 || form.username.length > 13) {
            setRule("用户名须为5-13位数字和字母")
        }

        if (form.password.length < 6 || form.password.length > 18) {
            setPasswordRule("密码必须为6-18位数字、字母、符号和下划线")
            return
        }
        if (!isAgreed) {
            alert('请阅读并同意用户协议和隐私政策');
            return;
        }

        const salt = 'frontend_salt'
        const encryptedPassword = MD5(form.password + salt).toString()

        await axios.post("http://localhost:3010/register", {
            ...form,
            password:encryptedPassword
        })
            .then(res => {
                if (res.data.code == 500) {
                    Toast.show({
                        content: '已有用户名，请重新注册',
                        position: 'top',
                      })
                }else if (res.data.code == 200) {
                    Notify.show({ type: 'success', message: res.data.msg })
                    navigate("/login")
                } else {
                    Notify.show({ type: 'danger', message: "注册失败，请重新注册" })
                }
            })

    }

    const [countdown, setCountdown] = useState(0);
    const [isAgreed, setIsAgreed] = useState(false);


    useEffect(() => {
        if (countdown > 0) {
            const timer = setTimeout(() => {
                setCountdown(countdown - 1);
            }, 1000);
            return () => clearTimeout(timer);
        }
    }, [countdown]);


    return (
        <React.Fragment>

            <div className="ljl-bigbox">
                <div className="ljl-bigbox-top">
                    <div className="ljl-bigbox-top-logo">LOGO</div>
                </div>
                <div className="ljl-bigbox-center">
                    <h4 className="ljl-bigbox-center-font">Hi~</h4>
                    <div>
                        <div className="input-container">
                            <div className="input-label">用户名</div>
                            <div className="phone-input-group">
                                <Input
                                    type="text"
                                    className="phone-input"
                                    placeholder="请输入用户名"
                                    value={form.username}
                                    onChange={(e) => {
                                        setForm({ ...form, username: e })
                                    }}
                                />
                            </div>
                            {/* <div style={{ fontSize: "0.3rem", color: "red" }}>{rule}</div> */}
                            <div style={{ display: form.username ? "block" : "none" }}>
                                {form.username.length >= 5 && form.username.length <= 16 ? "" : <div style={{ fontSize: "0.3rem", color: "red" }}>{rule}</div>}
                            </div>
                        </div>
                        {/* 用户名须为5-16位数字和字母 */}

                        <div className="input-container">
                            <div className="input-label">密码</div>
                            <div className="code-input-group">
                                <Input
                                    type="text"
                                    className="code-input"
                                    placeholder="请输入密码"
                                    value={form.password}
                                    onChange={(e) => {
                                        setForm({ ...form, password: e })
                                    }}
                                // maxLength={6}
                                />

                            </div>
                            <div style={{ display: form.password ? "block" : "none" }}>
                                {form.password.length >= 5 && form.password.length <= 16 ? "" : <div style={{ fontSize: "0.3rem", color: "red" }}>{passwordRule}</div>}
                            </div>
                            {/* <div style={{ fontSize: "0.3rem", color: "red" }}>{passwordRule}</div> */}
                        </div>

                        <div style={{ width: "90%", margin: "auto", display: "flex", justifyContent: "right", textAlign: "right" }}>
                            <div className="ljl-regiaterPhone" onClick={() => { navigate("/registerPhone") }}>手机号注册</div>
                        </div>

                        <div className="agreement-container">
                            <div className="checkbox-wrapper" onClick={() => setIsAgreed(!isAgreed)}>
                                <div className={`checkbox ${isAgreed ? 'checked' : ''}`}>
                                    {isAgreed && (
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16" height="16">
                                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
                                        </svg>
                                    )}
                                </div>
                            </div>
                            <div className="agreement-text">
                                我已阅读并同意 <span className="link">《用户协议》</span>和<span className="link">《隐私政策》</span>
                            </div>
                        </div>


                        <button className="register-button" onClick={userRegister}>
                            注册
                        </button>
                    </div>




                </div>

            </div>







        </React.Fragment>
    )
}

export default Register